<template>
  <div class="tabs">

      <!-- <van-tab>
        <van-tab to="/home/tuijian"  title="推荐"></van-tab>
        
      </van-tab> -->
      
      <van-tabs v-model="active" 
            title-active-color="#dd1a21"
            swipe-threshold="5" 
            :swipeable="true"
            line-height="2px"
            @click='onClick'
            >
        <!-- <van-tab to="/home/tuijian"  title="推荐"></van-tab> -->
        <van-tab  
                  v-for="(nav,index) in allNavList" 
                  :key="nav.id" 
                  :title="nav.name" 
                  @click="tabsClick"
                >
                <template v-slot:loading>
                  <van-loading size="24px">加载中...</van-loading>
                </template>
                
                </van-tab>

        <van-tab disabled id="cafv">占位符</van-tab>
        <div class="tabs-show" @click="showClick" :class="{istag: isTagShow}">
            <van-icon name="arrow-down" :class="{active: isShow}" />
        </div>
      </van-tabs>


     

      

      
        <!-- 遮盖层模块 -->
        <van-overlay duration="0.1" :show="isShow" lock-scroll class-name="overlay">
          <div class="tag-bgc">
            <div class="tag-title">全部频道</div>

            <div class="cate-gory">
              <!-- <div  class="channel">&nbsp;&nbsp;&nbsp;&nbsp;推荐&nbsp;&nbsp;&nbsp;</div> -->
              <div class="channel"
                    :value="currenIndex"
                    v-for="(item,index) in allNavList" 
                    :key="index"
                    :class="{oveActive: index === currenIndex}"
                    @click="tagClick(index)">{{item.name}}</div>
     
            </div>


            

          </div>
        </van-overlay>
  </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  props:['navList',"changedid"],

  data () {
    return {
      active: 0,
      isShow: false,
      isactive: true,
      // 遮流层激活状态
      currenIndex: 0,
      isTagShow: false,
      tuiId:2197355,
      cid:false
    }
  },
  mounted(){
    
  },
  computed:{
    navimg(){
      return ((this.navList || []).data || []).categoryList
      
    },
     allNavList() {
      const obj = {
        id: 1,
        name: "推荐",
      };
      let list = this.navimg||[]
      list.unshift(obj);
      return list;
    }
  },
  methods:{
    // 控制遮流层演示
    showClick(){
      this.isShow = !this.isShow
      this.isTagShow = !this.isTagShow
    },
    // 控制遮流层激活状态
    tagClick(index){
      this.currenIndex = index
      this.active = this.currenIndex
      // this.$router.
      console.log(this.active)
      console.log(this.currenIndex)
    },
    tabsClick(){
      this.currenIndex = this.active
      this.cid=true
    },
   
    onClick(name,title){
      // this.allNavList
      const currentId = this.navimg[name].id
      console.log(name,title)
      if(!name){
       this.$router.push({path:'/home'})
      }else{
        this.changedid(currentId)
      this.$router.push({
        path:'/home/life?cuuentId='+currentId
      })
      }
    }
  }
 
    
}

</script>
<style lang='less' scoped>
/deep/.van-tabs {
  height: 44px;
  .van-tabs__line {
    bottom: 20px;
  }
}
.tabs-show{
  position: absolute;
  
  text-align: center;
  background-color: #fff;
  width: 10%;
  line-height: 44px;
  height: 44px;
  top: 0;
  z-index: 99;
  right: 0;
  border: 0;
  .indexaaa{
    display: none;
  }
}
#cafv{
  background-color: #fff;
}
.overlay{
  margin-top: 49px;
}
.active{
  transform: rotate(180deg);
  transition: transform 0.3s;
  padding-top: 5px;
}
.istag{
  background-color: transparent;
}
.tag-bgc{
  position: fixed;
  background-color: #fff;
  padding: 0 7px;
  .tag-title{
    padding: 10px 0 5px 10px;
    color: #5f5f5f;
    font-weight: 700;
    font-size: 16px;
  }
  .cate-gory{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 30px;
    .channel{
      width:75px;
      height: 28px;
      margin: 5px;
      font-size: 12px;
      line-height: 28px;
      text-align: center;
      border: 1px solid #d3d3d3;
      background-color: #fafafa;
    }
    .oveActive{
      border-color: #dd1a21;
      color: #dd1a21;
    }
  }
}
</style>